<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }" v-if="$route.query.flag">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item>人员工时</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 查询条件 -->
        <el-row class="table-selbox" v-if="btnSel">
          <!-- 查询条件表单 -->
          <el-form :inline="true" :model="formInline" >
            <!-- 人员姓名 -->
            <el-form-item label="员工姓名" prop="userName">
              <el-select
                v-model="formInline.userName"
                filterable
                auto-complete="off"
                placeholder="请选择"
              >
                <el-option label="无" value></el-option>
                <el-option
                  v-for="(item,index) in groupList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
             <!-- 考勤日期 -->
            <el-form-item label="考勤日期" prop="logTime">
              <el-date-picker
                v-model="formInline.logTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <!-- 打卡结果 -->
            <!-- <el-form-item label="打卡结果" prop="result">
              <el-select
                v-model="formInline.result"
                filterable
                auto-complete="off"
                placeholder="请选择"
              >
                <el-option label="无" value></el-option> -->
                <!-- 循环所有客户 客户名称 客户ID -->
                <!-- <el-option
                  v-for="(item,index) in attResult"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <!-- 搜索 -->
            <el-form-item>
              <el-button icon="el-icon-search" @click="selHandle">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <!-- 基本操作按钮 是否授权显示-->
        <el-row class="table-btns" v-if="[btnAdd,btnDel,btnUpload,btnDown].indexOf(true) > -1">
          <!-- 添加 -->
          <!-- <el-button -->
            <!-- v-if="btnAdd" -->
            <!-- type="success" -->
            <!-- size="medium" -->
            <!-- icon="el-icon-document-add" -->
            <!-- @click="addHandle" -->
          <!-- >添加</el-button> -->
          <!-- 删除 -->
          <!-- <el-button -->
            <!-- type="danger" -->
            <!-- size="medium" -->
            <!-- icon="el-icon-delete" -->
            <!-- @click="batchRemove" -->
            <!-- v-if="btnDel" -->
          <!-- >删除</el-button> -->
          <!-- <div class="tag_check">
            <el-radio-group v-model="radioTag" @change="tagSel">
              <el-radio :label="0">正常考勤</el-radio>
              <el-radio :label="1">考勤缺失</el-radio>
            </el-radio-group>
          </div> -->
          <el-button type="primary" size="medium" style="float:right;" v-if="btnUpload" @click="showFile">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传
          </el-button>
          <!-- 下载 -->
          <el-button type="success" size="medium" style="float:right;margin-right:10px;" v-if="btnDown" @click="getUserWorksExcel">
            <i class="fa fa-cloud-download" aria-hidden="true"></i> 下载
          </el-button>
        </el-row>
        <!-- 数据列表 -->
        <el-table
          :data="menusData"
          border
          style="width: 100%"
          height="580"
          ref="menusData"
        >
          <!-- 序号 -->
          <!-- <el-table-column label="序号" align="center" type="index" width="50"></el-table-column> -->
          <!-- 工号 -->
          <el-table-column
            :show-overflow-tooltip="true"
            prop="userId"
            label="工号"
            width="100"
            fixed
          ></el-table-column>
          <!-- 员工姓名 -->
          <el-table-column
            :show-overflow-tooltip="true"
            prop="userName"
            label="员工姓名"
            width="100"
            fixed
          ></el-table-column>
          <!-- 考勤日期 -->
          <el-table-column label="考勤日期" sortable prop="logTime"></el-table-column>
          <!-- 小时数 -->
          <el-table-column label="小时数" :show-overflow-tooltip="true" width="150" prop="hours"></el-table-column>
          <!-- 考勤时间 -->
          <!-- <el-table-column label="考勤时间" :show-overflow-tooltip="true" width="150" prop="attendTime"></el-table-column> -->
            <!-- 打卡时间 -->
          <!-- <el-table-column label="打卡时间" :show-overflow-tooltip="true" width="150" prop="clockTime"></el-table-column> -->
          <!-- 打卡结果 -->
          <!-- <el-table-column label="打卡结果" :show-overflow-tooltip="true" width="150" prop="result"></el-table-column> -->
          <!-- 打卡地址 -->
          <!-- <el-table-column label="打卡地址" :show-overflow-tooltip="true" prop="address"></el-table-column> -->
          <!-- 操作列 -->
          <!-- <el-table-column
            label="管理"
            fixed="right"
            align="center"
            width="100"
            v-if="[btnDel,btnEdit].indexOf(true) > -1"
          > -->
            <!-- <template slot-scope="scope"> -->
              <!-- 修改 -->
              <!-- <el-button size="mini" @click="editHandle(scope.row, 1)" v-if="btnEdit" :disabled="isTwo">修改</el-button> -->
            <!-- </template> -->
          <!-- </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <div class="table-pageblock">
          <!-- current-page 当前页数  page-size 每页显示数 total 总页数-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,50,80,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>

    <el-dialog title="Excel文件上传" :visible.sync="fileVisible" width="600px">
      <div class="fileAsset">
        <el-form>
          <el-form-item label="选择文件">
            <input type="file" name="files" id="file" @change="verificationPicFile"/>
            <el-button type="primary" size="small" @click="fileAssetExcel">确认上传</el-button>
            <a class="down-btn" href="/static/file/phours.xlsx" download>模板下载</a>
          </el-form-item>
        </el-form>
        <div class="progress" v-if="isShowProgress">
          <div class="progressBox">
            <el-progress :percentage="percentage" :status="status" :color="progressColor" v-if="reFreshProgress"></el-progress>
          </div>
          <span>{{percentageName}}</span>
        </div>
        <p>友情提示：</p>
        <p>1、此操作为高风险操作，因此操作导致的数据问题，后果自负；</p>
        <p>2、只能上传xls/xlsx文件，且不超过2M。</p>
      </div>
    </el-dialog>

    <!-- 弹窗 新增or修改 -->
    <!-- <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    > -->
      <!-- 添加、修改表单 -->
      <!-- <el-form ref="editForm" :model="editForm" label-width="80px" :rules="editFormRules">
        <el-row :gutter="24">
          <el-col :span="12"> -->
            <!-- 考勤日期 -->
            <!-- <el-form-item label="考勤日期" prop="attendDate">
              <el-date-picker
                v-model="editForm.attendDate"
                type="date"
                disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12"> -->
            <!-- 考勤时间 -->
            <!-- <el-form-item label="考勤时间" prop="attendTime">
              <el-time-select
                v-model="editForm.attendTime"
                :picker-options="{
                  start: '08:00',
                  step: '00:30',
                  end: '18:30'
                }"
                placeholder="选择考勤时间">
              </el-time-select>
            </el-form-item>
          </el-col>
           <el-col :span="12"> -->
            <!-- 打卡结果 -->
            <!-- <el-form-item label="打卡结果" prop="result">
              <el-select
                v-model="editForm.result"
                filterable
                auto-complete="off"
                placeholder="请选择"
                style="width: 94%;"
              > -->
                <!-- 循环所有客户 客户名称 客户ID -->
                <!-- <el-option
                  v-for="(item,index) in attResult"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"> -->
          <!-- 打卡时间 -->
          <!-- <el-form-item label="打卡时间" prop="clockTime"  style="width:100%;">
            <el-time-picker
              arrow-control
              v-model="editForm.clockTime"
              placeholder="选择打卡时间">
            </el-time-picker>
          </el-form-item> -->
          <!-- </el-col> -->
        <!-- </el-row> -->
      <!-- </el-form> -->
      <!-- <div slot="footer" class="dialog-footer"> -->
        <!-- 取消 关闭弹窗 -->
        <!-- <el-button @click.native="dialogFormVisible=false">取消</el-button> -->
        <!-- 添加 清空表单初始数据 -->
        <!-- <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          @click="createData"
        >添加</el-button> -->
        <!-- 修改获取表单初始数据 -->
        <!-- <el-button v-else type="primary" @click="editData" >修改</el-button> -->
      <!-- </div> -->
    <!-- </el-dialog> -->
  </div>
</template>

<script>
// import { _debounce } from '@/public/debounce.js';
import moment from 'moment';
import axios from 'axios';
import { export2Excel } from '../../public/util';
export default {
  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },

  // 无白屏刷新方法注入
  inject: ['reload'],

  // 监听
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    },
    // 上传状态
    uploadCode: {
      handler (newVal, oldVal) {
        let _this = this;
        if (newVal !== oldVal && newVal !== '') {
          _this.uploadProgress();
        }
      }
    }
  },

  // 当前页面数据
  data () {
    return {
      // 导出Excel表头
      columns: [
        {title: '导入结果', key: 'res'}
      ],
      // progressData: {
      //   percentage: 50,
      //   status: ''
      // },
      // 是否显示进度条
      isShowProgress: false,
      reFreshProgress: true,
      isNewFileName: false,
      uploadCode: 1,
      percentageName: '',
      percentage: 0,
      status: '',
      progressColor: '#409eff',
      tenInterval: null,
      interval: null,
      // 打卡结果
      // attResult: [{
      //   label: '正常',
      //   value: '正常'
      // }, {
      //   label: '补卡审批通过',
      //   value: '补卡审批通过'
      // }, {
      //   label: '迟到',
      //   value: '迟到'
      // }, {
      //   label: '出差',
      //   value: '出差'
      // }, {
      //   label: '打卡无效',
      //   value: '打卡无效'
      // }, {
      //   label: '加班',
      //   value: '加班'
      // }, {
      //   label: '旷工迟到',
      //   value: '旷工迟到'
      // }, {
      //   label: '请假',
      //   value: '请假'
      // }, {
      //   label: '外出',
      //   value: '外出'
      // }, {
      //   label: '外勤',
      //   value: '外勤'
      // }, {
      //   label: '严重迟到',
      //   value: '严重迟到'
      // }, {
      //   label: '早退',
      //   value: '早退'
      // }],

      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 搜索条件
      formInline: {
        // 员工姓名
        userName: '',
        // 考勤日期
        logTime: ''
        // 打卡结果
        // result: ''
      },

      // cusList: [],

      groupList: [],

      // 列表数据
      menusData: [{}],
      // 当前页
      currentPage: 1,
      // 当前数
      pageSize: 20,
      // 总条目数
      total: 20,

      // // 弹窗类别
      // dialogStatus: '',

      // // 弹窗标题
      // textMap: {
      //   edit: '修改信息',
      //   create: '添加信息'
      // },
      // // 弹窗是否显示
      // dialogFormVisible: false,

      // 列表选中列
      sels: [],

      // 编辑界面输入框校验规则
      editFormRules: {
        result: [
          { required: true, message: '请选择打卡结果', trigger: 'change' }
        ],
        attendTime: [
          { required: true, message: '请选择考勤时间', trigger: 'change' }
        ],
        clockTime: [
          { required: true, message: '请选择打卡时间', trigger: 'change' }
        ]
      },

      // 界面默认数据
      editForm: {
        result: '',
        attendTime: '',
        clockTime: ''
      },

      // Excel文件上传
      fileVisible: false

      // 正常/异常
      // radioTag: 0,
      // isTwo: true
    };
  },

  // 实例创建后执行
  created () {
    // 按钮级授权
    this.authorization(this.$store.state.btns);

    // 获取所有用户
    this.getProlist();

    // 加载分页数据
    this.getmenusDataByPage();
  },

  mounted () {
    // this.getHeight();
    // 增加监听事件，窗口变化时得到高度。
    // window.addEventListener('resize', this.getHeight, false);
  },
  methods: {
    // 表格高度自适应
    // getHeight () {
    // // 获取浏览器高度并计算得到表格所用高度。
    //   this.tableHeight = document.documentElement.clientHeight - 350;
    // },
    // 上传进度条提示
    // format (percentage) {
    //   return percentage === 100 ? '上传成功' : `${percentage}%` + '上传中';
    // },
    // 上传进度条
    uploadProgress () {
      let _this = this;
      _this.isShowProgress = true;
      if (_this.uploadCode === 1) {
        _this.progressColor = '#409eff';
        _this.interval = setInterval(() => {
          _this.$nextTick(() => {
            _this.percentage += 10;
            _this.percentageName = '上传中';
            if (_this.percentage === 90) {
              clearInterval(_this.interval);
              _this.tenInterval = setInterval(() => {
                _this.percentage += 1;
                _this.percentageName = '上传中';
                if (_this.percentage >= 99) {
                  clearInterval(_this.interval);
                  clearInterval(_this.tenInterval);
                }
              }, 10000);
            };
          });
        }, 1000);
      };
      if (_this.uploadCode === 2 || _this.uploadCode === 3) {
        if (_this.uploadCode === 2) {
          _this.progressColor = '#67c23a';
          _this.percentage = 100;
          _this.status = 'success';
          _this.percentageName = '上传成功';
        } else {
          _this.progressColor = '#ff4949';
          _this.percentage = _this.percentage;
          _this.status = 'exception';
          _this.percentageName = '上传失败';
        }
        clearInterval(_this.interval);
        clearInterval(_this.tenInterval);
      }
    },
    // 工时导入
    showFile () {
      let _this = this;
      _this.fileVisible = true;
      _this.isShowProgress = false;
      _this.$nextTick(() => {
        document.getElementById('file').value = '';
      });
    },

    // 考勤筛选
    // tagSel () {
    //   let _this = this;
    //   if (_this.radioTag === 1) {
    //     _this.isTwo = false;
    //     _this.selHandle();
    //   } else {
    //     _this.isTwo = true;
    //     _this.selHandle();
    //   }
    // },

    // 文件判断
    verificationPicFile () {
      let _this = this;
      let file = document.querySelector('input[type=file]').files[0];
      let fileTypes = ['.xls', '.xlsx'];
      let fileMaxSize = 2048;// 2M
      let isNext = false;

      let fileName = file.name;
      let fileSize = file.size;
      _this.isNewFileName = true;

      if (_this.isNewFileName) {
        _this.$nextTick(() => {
          _this.reFreshProgress = true;
          _this.isShowProgress = false;
          _this.percentage = 0;
          _this.status = '';
          _this.percentageName = '';
          _this.uploadCode = '';
        });
      }

      if (fileName) {
        let fileEnd = fileName.substring(fileName.indexOf('.'));
        for (let i = fileTypes.length; i--;) {
          if (fileTypes[i] === fileEnd) {
            isNext = true;
            break;
          }
        }
        if (!isNext) {
          _this.$message({
            message: '不接受此文件类型！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        }
      }
      if (fileName) {
        let size = fileSize / 2048;
        if (size > fileMaxSize) {
          _this.$message({
            message: '文件大小不能大于2M！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        } else if (size <= 0) {
          _this.$message({
            message: '文件大小不能为0M！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        }
      }
    },

    // 文件上传
    fileAssetExcel () {
      let _this = this;
      let file = document.querySelector('input[type=file]').files[0];
      if (file === null || file === undefined || file === '') {
        _this.$message({
          message: '未选择任何文件！',
          type: 'error'
        });
      } else {
        let formData = new FormData(); // 创建form对象
        formData.append('uploadFile', file);
        // 上传进度条
        if (_this.isNewFileName) {
          _this.$nextTick(() => {
            _this.reFreshProgress = true;
            _this.uploadCode = 1;
          });
        }
        _this.uploadProgress();
        axios({
          url: 'api/uploadUserWorks',
          method: 'POST',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.status === 200) {
            if (res.data.code === 0) {
              // js中map()、some()、every()、filter()的区别
              // map 循环无法跳出
              // some return true
              // every return false / true
              // filter 过滤机制
              let result = res.data.datas;
              if (result.toString().indexOf('导入失败') > -1) {
                _this.uploadCode = 3;
                document.getElementById('file').value = '';
                _this.$message({
                  message: '导入失败，详情请查看文件！',
                  type: 'error'
                });
                for (let i = 0; i < result.length; i++) {
                  if (result[i] === '') {
                    result[i] = { res: '导入成功！' };
                  } else {
                    result[i] = { res: result[i] };
                  }
                }
                export2Excel('失败结果', _this.columns, result);
                return false;
              } else {
                _this.uploadCode = 2;
                _this.fileVisible = false;
                _this.getmenusDataByPage();
                _this.$message({
                  message: '数据导入成功！',
                  type: 'success'
                });
                return true;
              }
            } else {
              _this.uploadCode = 3;
              if (res.data.message.indexOf('Index') > -1) {
                _this.$message({
                  message: '模板格式不匹配',
                  type: 'error'
                });
              }
              document.getElementById('file').value = '';
            }
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }
    },

    // 按钮级授权
    authorization (data) {
      let _this = this;
      for (let i in data) {
        if (data['sel'] === 0) {
          _this.btnSel = false;
        }
        if (data['add'] === 0) {
          _this.btnAdd = false;
        }
        if (data['del'] === 0) {
          _this.btnDel = false;
        }
        if (data['upload'] === 0) {
          _this.btnUpload = false;
        }
        if (data['down'] === 0) {
          _this.btnDown = false;
        }
        if (data['edit'] === 0) {
          _this.btnEdit = false;
        }
        return i;
      }
    },

    // 获取所有用户
    getProlist () {
      let _this = this;
      let params = {
        status: ''
      };
      _this.$http.post('api/findAllBaseUsers', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          for (let i = datas.length; i--;) {
            _this.groupList.push({
              label: datas[i].userName,
              value: datas[i].userId
            });
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 查询
    selHandle: function () {
      let _this = this;
      let params = {};
      if (!_this.isTwo) {
        // 收集请求数据
        params = {
          // 员工姓名
          userId: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          beginTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[0]).format('YYYY-MM-DD') : '',
          endTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          // result: this.formInline.result === null ? '' : _this.formInline.result,
          // isAttend: 1,
          // isClock: 1,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      } else {
        // 收集请求数据
        params = {
          // 员工姓名
          userId: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          beginTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[0]).format('YYYY-MM-DD') : '',
          endTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          // result: this.formInline.result === null ? '' : _this.formInline.result,
          // isAttend: 0,
          // isClock: 0,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      }
      // 根据条件获取分页数据
      _this.$http.raw('api/findUWorks', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 总页数
          _this.total = datas.total;
          // 数据结果集
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 刷新页面数据
    getmenusDataByPage () {
      let _this = this;
      let params = {};
      if (!_this.isTwo) {
        // 收集请求数据
        params = {
          // 员工姓名
          userName: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          beginTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[0]).format('YYYY-MM-DD') : '',
          endTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          // result: this.formInline.result === null ? '' : _this.formInline.result,
          // isAttend: 1,
          // isClock: 1,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      } else {
        // 收集请求数据
        params = {
          // 员工姓名
          userName: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          beginTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[0]).format('YYYY-MM-DD') : '',
          endTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          // result: this.formInline.result === null ? '' : _this.formInline.result,
          // isAttend: 0,
          // isClock: 0,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      }
      // 获取分页数据
      _this.$http.raw('api/findUWorks', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.total = datas.total;
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 每页显示的条数改变
    handleSizeChange (val) {
      this.pageSize = val;
      // 调用刷新页面
      this.getmenusDataByPage();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      // 调用
      this.getmenusDataByPage();
    },

    // 下载
    getUserWorksExcel () {
      let _this = this;
      // let user = _this.formInline.user === null || _this.formInline.user === undefined ? '' : _this.formInline.user;

      // 收集请求信息
      let params = {
        userId: _this.formInline.userName === null ? '' : _this.formInline.userName,
        beginTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[0]).format('YYYY-MM-DD') : '',
        endTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[1]).format('YYYY-MM-DD') : ''
      };

      // 根据查询下载数据
      _this.$http.download('api/downUserWorks?userId=' + params.userId + '&beginTime=' + params.beginTime + '&endTime=' + params.endTime).then(res => {
        let blob = new Blob([res], {type: res.type});
        let downloadElement = document.createElement('a');
        let href = window.URL.createObjectURL(blob); // 创建下载的链接
        downloadElement.href = href;
        downloadElement.download = '人员工时.xlsx'; // 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放blob对象
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }

    // 显示编辑界面
    // editHandle: function (row) {
    //   let _this = this;
    //   // 弹窗类型
    //   _this.dialogStatus = 'edit';
    //   // 弹窗显示状态
    //   _this.dialogFormVisible = true;
    //   // 弹出窗表单初始值赋值
    //   _this.editForm = {
    //     id: row.id,
    //     result: row.result,
    //     attendDate: '20' + row.attendDate.substring(0, 8),
    //     attendTime: row.attendTime,
    //     clockTime: row.clockTime
    //   };
    // },

    // 显示新增界面
    // addHandle: function () {
    //   let _this = this;
    //   // 弹窗类型
    //   _this.dialogStatus = 'create';
    //   // 弹窗显示状态
    //   _this.dialogFormVisible = true;

    //   // 初始化新增界面默认数据
    //   _this.editForm = {
    //     cusName: '',
    //     parentId: '',
    //     cusType: '',
    //     industry: '',
    //     credibility: '',
    //     contact: '',
    //     address: '',
    //     note: ''
    //   };
    // },
    // 修改
    // editData: _debounce(function () {
    //   let _this = this;
    //   _this.$nextTick(() => {
    //     // 判断是否通过验证规则验证
    //     _this.$refs['editForm'].validate(valid => {
    //       if (valid) {
    //         // 收集请求数据
    //         let params = {
    //           id: _this.editForm.id,
    //           result: _this.editForm.result,
    //           attendTime: _this.editForm.attendDate + ' ' + _this.editForm.attendTime + ':00',
    //           clockTime: moment(_this.editForm.clockTime).format('YYYY-MM-DD HH:mm:ss')
    //         };
    //         // 修改异常考勤信息
    //         _this.$http.raw('api/updateAttend', params).then(res => {
    //           let { code } = res;
    //           // 判断Code状态
    //           if (code === 0) {
    //             _this.$message({
    //               message: '修改成功！',
    //               type: 'success'
    //             });
    //             // 初始化弹出窗表单数据
    //             _this.$refs['editForm'].resetFields();
    //             // 关闭弹窗
    //             _this.dialogFormVisible = false;
    //             // 刷新列表
    //             _this.getmenusDataByPage();
    //           }
    //         }).catch(err => {
    //           if (err === undefined) {
    //             _this.$message({
    //               message: '服务器响应异常！',
    //               type: 'error'
    //             });
    //             return false;
    //           }
    //         });
    //       }
    //     });
    //   });
    // }, 200),

    // 添加
    // createData: _debounce(function () {
    //   let _this = this;
    //   _this.$nextTick(() => {
    //     // 判断是否通过验证规则验证
    //     _this.$refs['editForm'].validate(valid => {
    //       if (valid) {
    //         // 收集请求参数
    //         let params = {
    //           cusName: _this.editForm.cusName === null ? '' : _this.editForm.cusName,
    //           cusType: _this.editForm.cusType === null ? '0' : _this.editForm.cusType,
    //           industry: _this.editForm.industry === null ? '0' : _this.editForm.industry,
    //           contact: _this.editForm.contact === null ? '' : _this.editForm.contact,
    //           address: _this.editForm.address === null ? '' : _this.editForm.address,
    //           note: _this.editForm.note === null ? '' : _this.editForm.note,
    //           parentId: _this.editForm.parentId === null ? 0 : _this.editForm.parentId,
    //           credibility: _this.editForm.credibility === null ? '0' : _this.editForm.credibility
    //         };
    //         // 获取客户名称
    //         let getCus = {
    //           cusName: _this.editForm.cusName
    //         };
    //         // 通过客户名称判断是否被占用
    //         _this.$http.post('api/getCusCount', getCus).then(res => {
    //           let { code, datas } = res;
    //           // 判断Code状态
    //           if (code === 0) {
    //             if (datas) {
    //               _this.$message({
    //                 message: '客户名称被占用！',
    //                 type: 'error'
    //               });
    //             } else {
    //               // 添加用户
    //               _this.$http.raw('api/inserCustom', params).then(res => {
    //                 let { code } = res;
    //                 // 判断Code状态
    //                 if (code === 0) {
    //                   _this.$message({
    //                     message: '添加成功！',
    //                     type: 'success'
    //                   });
    //                   _this.$refs['editForm'].resetFields();
    //                   _this.dialogFormVisible = false;
    //                   // 刷新列表
    //                   _this.getmenusDataByPage();
    //                   _this.getProlist();
    //                 }
    //               }).catch(err => {
    //                 if (err === undefined) {
    //                   _this.$message({
    //                     message: '服务器响应异常！',
    //                     type: 'error'
    //                   });
    //                   return false;
    //                 }
    //               });
    //             }
    //           }
    //         }).catch(err => {
    //           if (err === undefined) {
    //             _this.$message({
    //               message: '服务器响应异常！',
    //               type: 'error'
    //             });
    //             return false;
    //           }
    //         });
    //       }
    //     });
    //   });
    // }, 200),

    // // 删除
    // handleDelete (data) {
    //   let _this = this;
    //   // 二次删除确认
    //   _this.$confirm('确认删除选中的信息吗？', '提示', {
    //     type: 'warning'
    //   }).then(() => {
    //     // 修改状态，逻辑删除
    //     let params = [data.id];
    //     // 根据数据ID删除对应用户信息
    //     _this.$http.raw('api/batchDelCustom', params).then(res => {
    //       let { code } = res;
    //       if (code === 0) {
    //         _this.$message({
    //           type: 'success',
    //           message: '删除成功！'
    //         });
    //         // 刷新列表
    //         _this.getmenusDataByPage();
    //         _this.getProlist();
    //       }
    //     }).catch(err => {
    //       if (err === undefined) {
    //         _this.$message({
    //           message: '服务器响应异常！',
    //           type: 'error'
    //         });
    //         return false;
    //       }
    //     });
    //   }).catch(() => {
    //     _this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },

    // // 全选、单选、多选
    // selsChange: function (sels) {
    //   this.sels = sels;
    // },

    // // 批量删除
    // batchRemove: function () {
    //   let _this = this;
    //   // 判断是否选择数据
    //   if (!_this.sels.length) {
    //     _this.$message.warning('您还没选择任何数据！');
    //     return;
    //   }
    //   // 二次删除确认
    //   _this.$confirm('确认删除选中的信息吗？', '提示', {
    //     type: 'warning'
    //   }).then(() => {
    //     // 修改状态，逻辑删除
    //     let params = [];
    //     // 获取选中数据ID集合
    //     _this.sels.map(item => {
    //       return params.push(item.id);
    //     });
    //     // 删除对应ID用户信息
    //     _this.$http.raw('api/batchDelCustom', params).then(res => {
    //       let { code } = res;
    //       if (code === 0) {
    //         _this.$message({
    //           type: 'success',
    //           message: '批量删除成功！'
    //         });
    //         // 刷新列表
    //         _this.getmenusDataByPage();
    //         _this.getProlist();
    //       }
    //     }).catch(err => {
    //       if (err === undefined) {
    //         _this.$message({
    //           message: '服务器响应异常！',
    //           type: 'error'
    //         });
    //         return false;
    //       }
    //     });
    //   }).catch(() => {
    //     _this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // }
  },
  beforeDestroy () {
    clearInterval(this.interval);
    clearInterval(this.tenInterval);
    this.interval = null;
    this.tenInterval = null;
  }
};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
